<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div class="box" id="box">
      <button class="pre">←</button>
      <button class="next">→</button>
      <ul>
        <li>
          <img src="./imgs/1.png" />
        </li>
        <li>
          <img src="./imgs/2.png" />
        </li>
        <li>
          <img src="./imgs/3.png" />
        </li>
        <li>
          <img src="./imgs/4.png" />
        </li>
        <li>
          <img src="./imgs/5.png" />
        </li>
        <li>
          <img src="./imgs/6.png" />
        </li>
        <li>
          <img src="./imgs/7.png" />
        </li>
        <li>
          <img src="./imgs/8.png" />
        </li>
        <li>
          <img src="./imgs/9.png" />
        </li>
        <li>
          <img src="./imgs/10.png" />
        </li>
      </ul>
    </div>

    <script>
      /*
      1. 自动播放
      2. 循环播放、轮播
      3. 分页
      */ 
      // 图片宽度
      const width = 150;
      // 每页展示图片数量
      const count = 3;
      // 记录移动的距离 ul marginLeft
      let pos = 0;

      // 移动的区间 0 到 -width*(lis.length-count)

      const box = document.getElementById("box");
      const ul = box.querySelector("ul");
      const lis = box.querySelectorAll("li");
      const next = box.querySelector(".next");
      const pre = box.querySelector(".pre");

      pre.onclick = function () {
        pos += width * count;
        if (pos > 0) pos = 0;
        ul.style.marginLeft = pos + "px";
      };

      next.onclick = function () {
        pos -= width * count;
        if (pos < -width * (lis.length - count))
          pos = -width * (lis.length - count);
        ul.style.marginLeft = pos + "px";
      };
    </script>
  </body>
</html>
